<template>
    <div class="outstanding-achievement">

        <div class="content-container">
            <div class="notification-bar">
                <span class="notification-icon"></span>
                <span class="notification-text">{{ activeMsg }}</span>
            </div>
            <div class="section-title"></div>
            <div class="nav-tabs">
                <div v-for="(tab, index) in tabs" :key="index" class="tab-item"
                    :class="{ active: activeTabIndex === index }" @click="switchTab(index)">
                    <div class="tab-content">
                        <img :src="tab.activeUrl" class="tab-icon" />
                        <span class="tab-name">{{ tab.name }}</span>
                    </div>
                </div>
            </div>

            <div class="activity-carousel">
                <div class="carousel-container">
                    <!-- <button class="prev-btn" @click="prevSlide">
                        <span class="icon-arrow-left"></span>
                    </button> -->
                    <div class="carousel-wrapper" v-loading="loading">
                        <div class="carousel-slide" v-for="(activity, index) in activities" :key="index"
                            @click="goDetail(activity)">
                            <div class="activity-card">
                                <div class="activity-image">
                                    <img :src="activity.url" :alt="activity.proName">
                                </div>
                                <div class="activity-info">
                                    <div class="activity-title">
                                        <img :src="HotIcon" class="icon-hot" v-if="activity.isHot" />
                                        <h3>{{ activity.proName }}</h3>
                                    </div>
                                    <div class="activity-organizer">
                                        <span>{{ teacherLabel.teacher[activity.proType] }}：{{ activity[teacherLabel.organizerField[activity.proType]] }}</span>
                                    </div>
                                    <div class="activity-time">
                                        <span>{{ teacherLabel.proTime[activity.proType] }}：{{ activity.startTime }}——{{
                                            activity.endTime }}</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="carousel-nodata" v-if="activities.length === 0">
                            <el-empty class="carousel-nodata" :image="NoDataImage" v-if="activities.length < 1"
                                :image-size="64">
                            </el-empty>
                        </div>
                    </div>

                    <!-- <button class="next-btn" @click="nextSlide">
                        <i class="icon-arrow-right"></i>
                    </button> -->
                </div>

                <div class="carousel-more">
                    <el-button round size="large" @click="showMore">更多<el-icon>
                            <More />
                        </el-icon></el-button>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { getProjectList } from "@/api/home/home";
import { getActivityAll } from "@/api/system/activity";
import { getMessageDefault } from "@/api/system/message";
import { tr } from 'element-plus/es/locales.mjs';
// 导入图片资源
import courseTopImg from '/static/pdf/web/images/home/course-top.png';
import activeCourseTopImg from '/static/pdf/web/images/home/active-course-top.png';
import experimentTopImg from '/static/pdf/web/images/home/experiment-top.png';
import activeExperimentTopImg from '/static/pdf/web/images/home/active-experiment-top.png';
import projectTopImg from '/static/pdf/web/images/home/project-top.png';
import activeProjectTopImg from '/static/pdf/web/images/home/active-project-top.png';
import growthTopImg from '/static/pdf/web/images/home/growth-top.png';
import activeGrowthTopImg from '/static/pdf/web/images/home/active-growth-top.png';
import competitionTopImg from '/static/pdf/web/images/home/competition-top.png';
import activeCompetitionTopImg from '/static/pdf/web/images/home/active-competition-top.png';
import otherTopImg from '/static/pdf/web/images/home/other-top.png';
import activeOtherTopImg from '/static/pdf/web/images/home/active-other-top.png';
import HotIcon from '/static/pdf/web/images/home/hot.png';
import NoDataImage from '/static/pdf/web/images/home/no-data.png';


const router = useRouter();
const activeMsg = ref('站内消息');
const loading = ref(false);

// 标签页数据
// 修改标签页数据，添加顶部图标
const tabs = ref([
    { name: '课程', bannerType: 'course', url: courseTopImg, activeUrl: activeCourseTopImg, type: '1' },
    { name: '实验', bannerType: 'experiment', url: experimentTopImg, activeUrl: activeExperimentTopImg, type: '2' },
    { name: '项目', bannerType: 'project', url: projectTopImg, activeUrl: activeProjectTopImg, type: '3' },
    // { name: '讲座', bannerType: 'lecture', url: lectureTopImg, activeUrl: activeLectureTopImg, type:'4'},
    { name: '成长营', bannerType: 'growth', url: growthTopImg, activeUrl: activeGrowthTopImg, type: '24' },
    { name: '竞赛', bannerType: 'competition', url: competitionTopImg, activeUrl: activeCompetitionTopImg, type: '25' },
    { name: '其他', bannerType: 'other', url: otherTopImg, activeUrl: activeOtherTopImg, type: '26' }
]);
const activeTabIndex = ref(0);
function getTabsAll() {
    getActivityAll().then(res => {
        if (res.code == 200) {
            const tempTabs = tabs.value;
            console.log('tempTabs:', tempTabs);
            const resData = res.data;
            console.log('getTabsAll响应数据:', res.data);

            // 根据name和title匹配并合并数据
            const mergedData = resData.map(item => {
                const matchedTab = tempTabs.find(tab => tab.name === item.title);
                if (matchedTab) {
                    return {
                        name: item.title,
                        title: item.title,
                        bannerType: item.bannerType,
                        url: matchedTab.url,
                        activeUrl: matchedTab.activeUrl,
                    };
                } else {
                    const randomIndex = Math.floor(Math.random() * tempTabs.length);
                    const randomTab = tempTabs[randomIndex];
                    return {
                        name: item.title,
                        title: item.title,
                        bannerType: item.bannerType,
                        url: randomTab.url,
                        activeUrl: randomTab.activeUrl,
                    };
                }
            });
            tabs.value = mergedData;
            loadActivitiesByType(tabs.value[activeTabIndex.value].bannerType);
        }
    });
}


getTabsAll();

const teacherLabel = ref({
    teacher: {
        2: "主讲人",
        3: "负责人",
        4: "负责人",
        24: "主办方",
        25: "主办方",
        26: "负责人",
    },
    proTime: {
        2: "课程时间",
        3: "实验时间",
        4: "项目时间",
        24: "比赛时间",
        25: "研学时间",
        26: "活动时间",
    },
    organizerField: {
        2: "teacher",
        3: "teacher",
        4: "teacher",
        24: "chargePerson",
        25: "chargePerson",
        26: "teacher",
    },
});
// 切换标签页
const switchTab = (index) => {
    activeTabIndex.value = index;

    loadActivitiesByType(tabs.value[index].bannerType);
};

// 根据类型加载活动数据
const loadActivitiesByType = (type) => {
    // 根据类型加载活动数据
    // 这里可以根据不同的类型加载不同的数据
    const queryParams = {
        pageDomain: {
            isAsc: "",
            orderByColumn: "",
            pageNum: 1,
            pageSize: 4,
            reasonable: true
        },
        proName: "",
        proType: type,
        sortingType: "最新"
    }
    loading.value = true;
    getProjectList(queryParams).then(res => {
        if (res.code == 200) {
            activities.value = res.rows;
            activities.value.map(item => {
                item.isHot = true;
            });

        } else {
            console.log('获取活动数据失败');
        }
        loading.value = false;
    })

    getMessageDefault().then(res => {
        if (res.code == 200) {
            if (res.data) {
                if (res.data.length > 0) {
                    activeMsg.value = res.data[0].title;
                }
            }
        }
    })

    console.log(`加载${type}类型的活动数据`);

};

// 更多按钮点击事件
const showMore = () => {
    // 获取当前活动类型
    const currentType = tabs.value[activeTabIndex.value].bannerType;
    // 跳转到对应的列表页面
    router.push({
        path: '/home/index',
        query: { typeId: currentType }
    });
    console.log(`跳转到${currentType}类型的活动列表页`);
};

// 活动数据
const activities = ref([]);

// 轮播控制
const currentSlide = ref(0);
const totalSlides = ref(activities.value.length);

const nextSlide = () => {
    currentSlide.value = (currentSlide.value + 1) % totalSlides.value;
};

const prevSlide = () => {
    currentSlide.value = (currentSlide.value - 1 + totalSlides.value) % totalSlides.value;
};

// 自动轮播
let autoplayInterval = null;

const startAutoplay = () => {
    autoplayInterval = setInterval(() => {
        nextSlide();
    }, 5000); // 5秒切换一次
};

const stopAutoplay = () => {
    if (autoplayInterval) {
        clearInterval(autoplayInterval);
    }
};

//跳转活动详情
function goDetail(item) {
    router.push({
        path: "/home/detail",
        query: { typeId: tabs.value[activeTabIndex.value].bannerType, projectId: item.id },
    });
}

onMounted(() => {
    startAutoplay();
});
</script>

<style scoped>
.outstanding-achievement {
    /* background-image: url('@/assets/home/header/bg.png'); */
    background-size: cover;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 20px 0;
}

.notification-bar {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    margin-bottom: 50px;
}

.notification-icon {
    background-image: url("@/assets/home/notification.png");
    margin-right: 10px;
    height: 18px;
    width: 18px;
    background-size: cover;
}

.content-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2px;
}

.section-title {
    background-image: url("@/assets/home/outstanding-achievement-title.png");
    margin: 50px auto;
    /* 修改为居中 */
    height: 50px;
    width: 240px;
    background-size: contain;
    /* 修改为contain以确保图片完整显示 */
    background-repeat: no-repeat;
    /* 确保图片不重复 */
    background-position: center;
    /* 确保图片居中 */
}


.top-icon-area img {
    margin-left: 8px;
    height: 20px;
    width: 20px;
    color: #6b8cff;
}


.nav-tabs {
    display: flex;
    position: relative;
    margin-bottom: -10px;
    padding-left: 3px;
    z-index: 10;
}

.tab-item {
    width: 120px;
    height: 40px;
    margin-right: 10px;
    background: #f0f6ff;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    position: relative;
    transform: skewX(-10deg);
    /* 倾斜效果 */
    transition: all 0.3s ease;
    box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.1);
}

.tab-content {
    background-image: url("@/assets/home/active-tab-logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    transform: skewX(10deg);
    /* 抵消父元素的倾斜，使内容保持正常 */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    color: #333e75;
}

.tab-icon {
    width: 20px;
    height: 20px;
}

.tab-name {
    font-size: 16px;
    white-space: nowrap;
}

.tab-item:hover {
    transform: skewX(-10deg) translateY(-3px);
}

.tab-item.active {
    background: #6b8cff;
    height: 45px;
    /* 活动标签略高 */
    z-index: 2;
}

.tab-item.active .tab-content {
    color: white;
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.tab-item i {
    margin-right: 5px;
    font-size: 18px;
}

.tab-item .tab-name-logo {
    width: 60%;
    height: 80%;
    background-image: url("@/assets/home/active-tab-logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left -10px;
}

.tab-item.tab-name-txt {
    min-width: 120px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.activity-carousel {
    background-color: white;
    border-radius: 0 0 10px 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.carousel-nodata {
    margin-top: 5%;
    margin-left: 46%;
}

.carousel-more {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.carousel-container {
    overflow: hidden;
    position: relative;
    min-height: 364px;
    padding: 0 40px;
    /* 修改padding，为按钮留出空间 */
    display: flex;
    /* 添加flex布局 */
    align-items: center;
    /* 垂直居中 */
}

.carousel-wrapper {
    flex: 1;
    /* 占据剩余空间 */
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.prev-btn,
.next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.3);
    /* 添加半透明背景 */
    transition: all 0.3s ease;
    z-index: 2;
}

.prev-btn {
    left: -15px;
}

.next-btn {
    right: -15px;
}

.prev-btn:hover,
.next-btn:hover {
    background-color: rgba(255, 255, 255, 0.8);

}


.carousel-slide {
    flex: 0 0 calc(25% - 15px);
}

.activity-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    /* 添加过渡动画 */
    cursor: pointer;
    /* 添加鼠标指针样式 */
}

.activity-card:hover {
    transform: scale(1.05);
    /* 悬浮时放大 5% */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* 增强阴影效果 */
}

.activity-image {
    height: 180px;
    overflow: hidden;
}

.activity-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.activity-info {
    padding: 12px;
}

.activity-title {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    height: 42px;
    /* 添加固定高度，刚好容纳两行文字 */
}

.activity-title h3 {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 100%;
    /* 让标题内容占满固定高度的容器 */
}



.activity-organizer,
.activity-time {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
    height: 32px;
    /* 添加固定高度，刚好容纳两行文字 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.carousel-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.prev-btn,
.next-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: #999;
}

.pagination {
    display: flex;
    align-items: center;
    margin: 0 20px;
    color: #666;
    font-size: 14px;
}

.pagination .more {
    margin-right: 5px;
}



.icon-arrow-left {
    display: inline-block;
    width: 36px;
    height: 36px;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-arrow-right {
    display: inline-block;
    width: 36px;
    height: 36px;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-arrow-left {
    background-image: url('@/assets/home/arrow-left.png');
}

.icon-arrow-right {
    background-image: url('@/assets/home/arrow-right.png');
}

.icon-hot {
    display: inline-block;
    margin-right: 5px;
    font-size: 16px;
    width: 16px;
    height: 16px;
}


@media (max-height: 950px) {
    .outstanding-achievement {
        padding-top: 5px;
    }

    .notification-bar {
        margin-top: 5px;
        margin-bottom: 9px;
        padding: 0 74px;
        font-size: 16px;
    }

    .section-title {
        margin: 0 auto 35px auto;
        height: 40px;
    }

    .nav-tabs {
        margin-bottom: -8px;
        margin-left: 5.2%;
        padding-left: 0;
        gap: 4px;
    }

    .tab-item {
        width: 120px;
        height: 40px;
        margin-right: 10px;
    }

    .tab-item.active {
        height: 45px;
    }

    .tab-content {
        padding: 0 15px;
        gap: 8px;
    }

    .tab-icon {
        width: 20px;
        height: 20px;
    }

    .tab-name {
        font-size: 16px;
    }

    .activity-carousel {
        padding: 15px;
        max-width: 90%;
        margin: 0 auto;
    }

    .carousel-container {
        min-height: 320px;
        padding: 0 35px;
    }

    .carousel-wrapper {
        gap: 15px;
    }

    .carousel-slide {
        flex: 0 0 calc(25% - 12px);
        max-width: 340px;
    }

    .activity-card {
        border-radius: 7px;
    }

    .activity-image {
        height: 160px;
    }

    .activity-info {
        padding: 10px;
    }

    .activity-title {
        margin-bottom: 8px;
        height: 38px;
    }

    .activity-title h3 {
        font-size: 14px;
    }

    .activity-organizer,
    .activity-time {
        font-size: 12px;
        height: 32px;
        margin-bottom: 5px;
    }
}


@media (max-height: 768px) {
    .notification-bar {
        margin-bottom: 20px;
        padding: 0 33px;
        font-size: 14px;
    }

    .section-title {
        margin: 0 auto 55px auto;
        height: 40px;
    }

    .nav-tabs {
        margin-bottom: -6px;
        margin-left: 2.7%;
        padding-left: 0;
        gap: 2px;
    }

    .tab-item {
        width: 90px;
        height: 32px;
        margin-right: 6px;
    }

    .tab-item.active {
        background: #6b8cff;
        height: 38px;
        /* 活动标签略高 */
        z-index: 2;
    }

    .tab-content {
        padding: 0 8px;
        gap: 4px;
    }

    .tab-icon {
        width: 16px;
        height: 16px;
    }

    .tab-name {
        font-size: 13px;
    }

    .outstanding-achievement {
        padding-top: 0px;
    }

    .activity-carousel {
        padding: 10px;
        max-width: 95%;
        /* 添加最大宽度限制 */
        margin: 0 auto;
        /* 居中显示 */
    }

    .carousel-container {
        min-height: 260px;
        padding: 0 23px;
    }

    .carousel-wrapper {
        gap: 10px;
    }

    .carousel-slide {
        flex: 0 0 calc(25% - 8px);
        max-width: 280px;
        /* 增加响应式布局下的最大宽度 */
    }

    .activity-card {
        border-radius: 6px;
        width: 100%;
        /* 确保卡片填充容器宽度 */
    }

    .activity-image {
        height: 110px;
    }

    .activity-info {
        padding: 6px;
    }

    .activity-title {
        margin-bottom: 6px;
        height: 28px;
    }

    .activity-title h3 {
        font-size: 12px;
    }

    .activity-organizer,
    .activity-time {
        font-size: 12px;
        height: 32px;
        margin-bottom: 5px;
        margin-left: 8px;
    }
}

@media (max-height: 600px) {
    .notification-bar {
        margin-bottom: 10px;
        padding: 0 20px;
        font-size: 12px;
    }

    .section-title {
        margin: 0 auto 25px auto;
        height: 30px;
    }

    .nav-tabs {
        margin-bottom: -4px;
        margin-left: 2%;
        gap: 1px;
    }

    .tab-item {
        width: 80px;
        height: 28px;
        margin-right: 4px;
    }

    .tab-item.active {
        height: 32px;
    }

    .tab-content {
        padding: 0 6px;
        gap: 2px;
    }

    .tab-icon {
        width: 14px;
        height: 14px;
    }

    .tab-name {
        font-size: 12px;
    }

    .activity-carousel {
        padding: 8px;
        max-width: 98%;
    }

    .carousel-container {
        min-height: 220px;
        padding: 0 15px;
    }

    .carousel-wrapper {
        gap: 8px;
    }

    .carousel-slide {
        flex: 0 0 calc(25% - 6px);
        max-width: 240px;
    }

    .activity-image {
        height: 90px;
    }

    .activity-info {
        padding: 4px;
    }

    .activity-title {
        margin-bottom: 4px;
        height: 24px;
    }

    .activity-title h3 {
        font-size: 11px;
    }

    .activity-organizer,
    .activity-time {
        font-size: 11px;
        height: 24px;
        margin-bottom: 3px;
        margin-left: 4px;
    }

    .carousel-more {
        margin-top: 10px;
    }

    .carousel-more .el-button {
        padding: 8px 15px;
        font-size: 12px;
    }
}

@media (max-height: 600px) {
    .notification-bar {
        margin-bottom: 10px;
        padding: 0 20px;
        font-size: 12px;
    }

    .section-title {
        margin: 0 auto 25px auto;
        height: 30px;
    }

    .nav-tabs {
        margin-bottom: -4px;
        margin-left: 2%;
        gap: 1px;
    }

    .tab-item {
        width: 80px;
        height: 28px;
        margin-right: 4px;
    }

    .tab-item.active {
        height: 32px;
    }

    .tab-content {
        padding: 0 6px;
        gap: 2px;
    }

    .tab-icon {
        width: 14px;
        height: 14px;
    }

    .tab-name {
        font-size: 12px;
    }

    .activity-carousel {
        padding: 8px;
        max-width: 98%;
    }

    .carousel-container {
        min-height: 220px;
        padding: 0 15px;
    }

    .carousel-wrapper {
        gap: 8px;
    }

    .carousel-slide {
        flex: 0 0 calc(25% - 6px);
        max-width: 240px;
    }

    .activity-image {
        height: 90px;
    }

    .activity-info {
        padding: 4px;
    }

    .activity-title {
        margin-bottom: 4px;
        height: 24px;
    }

    .activity-title h3 {
        font-size: 11px;
    }

    .activity-organizer,
    .activity-time {
        font-size: 11px;
        height: 30px;
        margin-bottom: 3px;
        margin-left: 4px;
    }

    .carousel-more {
        margin-top: 10px;
    }

    .carousel-more .el-button {
        padding: 8px 15px;
        font-size: 12px;
    }
}
</style>